import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView } from 'react-native';


import {
    Tabs, Icon, Button,
    Modal,
    WhiteSpace,
    WingBlank,
    Toast, Flex, Tag, DatePicker, List,
    Provider,
} from '@ant-design/react-native';
const styles = StyleSheet.create({

    tabText: {
        fontSize: 10,
        color: "#000",
    },
    tabValText: {
        fontSize: 12,
        color: "#333",
        textAlign: "right"
    },
    titleText: {
        fontSize: 12,
        color: "#B8B8B8"
    }

});
export class Police extends Component {
    constructor(props) {
        super(props);


        this.onClose2 = () => {
            this.setState({
                visible2: false,

            });
        };
        this.onClose3 = () => {
            this.setState({
                visible3: false,
            });
        };
        this.state = {
            visible2: false,
            visible3: false,
            tabstate: 0,
            value: undefined,
        };
    }

    ontabs = (v, b) => {
        console.log(v, b)
        this.setState({
            tabstate: b
        })
    }

    onDatePicker = (value) => {
        console.log(value)
        this.setState({ value });
    };
    render() {
        const icon = <View style={{ justifyContent: 'center', flexDirection: "row", display: "flex" }}><Text>当日报警</Text>
            <Icon name={"caret-down"} size="md" onPress={() => this.setState({ visible2: true })} style={{ opacity: this.state.tabstate ? 0 : 1 }} />
        </View>
        const icon1 = <View style={{ justifyContent: 'center', flexDirection: "row", display: "flex" }}><Text>历史报警</Text>
            <Icon name={"caret-down"} size="md" onPress={() => this.setState({ visible3: true })} style={{ opacity: !this.state.tabstate ? 0 : 1 }} />
        </View>
        const tabs = [
            {
                title: icon,

            },
            { title: icon1 },

        ];
        const style = {
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
            backgroundColor: '#fff',
        };

        const topClire3 = [
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
        ]



        return (

            <Tabs tabs={tabs} style={{ backgroundColor: "#ccc", color: "#000" }} onChange={this.ontabs}>


                <ScrollView
                    style={{ flex: 1, paddingTop: 10 }}
                // automaticallyAdjustContentInsets={false}
                // showsHorizontalScrollIndicator={false}
                // showsVerticalScrollIndicator={false}
                >
                    <Modal
                        popup
                        visible={this.state.visible2}
                        animationType="slide-up"
                        onClose={this.onClose2}
                        maskClosable
                    >
                        <View style={{ flex: 1, height: 400, padding: 5, }}>
                            <View style={{ flexDirection: "row", flex: 1.5, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1 }}>
                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>站点选取 : </Text></View>
                                    <View style={{ flex: 1 }}></View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", justifyContent: "center" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>#1企业</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>#2企业</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>#3企业</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>#4企业</Tag></View>
                                        <View style={{ margin: 2 }}><Tag style={{ opacity: 0 }}>#5企业</Tag></View>
                                    </View>
                                </View>
                            </View>

                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}>
                                    <Text style={{ textAlign: "center", paddingLeft: 10 }}>报警类型 : </Text>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>库存报警</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>泄漏报警</Tag></View>
                                    </View>
                                </View>
                            </View>

                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}>
                                    <Text style={{ textAlign: "center", paddingLeft: 10 }}>报警状态 : </Text>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>已解除</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>未解除</Tag></View>
                                    </View>
                                </View>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1.5, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1 }}>
                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>报警时段 : </Text></View>
                                    <View style={{ flex: 1 }}></View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", justifyContent: "center" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>12h-18h</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>0h-6h</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>18h-24h</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>6h-12h</Tag></View>
                                        <View style={{ margin: 2 }}><Tag style={{ opacity: 0 }}>#5企业</Tag></View>
                                    </View>
                                </View>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Button size="small" style={{ width: 100, height: 30 }}>取消</Button></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Button type="primary" size="small" style={{ width: 100, height: 30 }}>查询</Button></View>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </Modal>
                    {
                        topClire3.map((item, index) => {
                            return (
                                <View
                                    style={{ display: "flex", alignItems: 'center', flexDirection: "row", height: 90, paddingLeft: 10, backgroundColor: "#fff" }}
                                    key={index}
                                >
                                    <View style={{ borderRadius: 50, overflow: "hidden", width: 50, height: 50 }}>
                                        <Image
                                            style={{ width: 50, height: 50 }}
                                            source={require('../../static/img/ku2.png')}
                                        />
                                    </View>

                                    <View style={{ flex: 1, height: 90, padding: 3, borderBottomWidth: 1, borderBottomColor: "#ccc", paddingTop: 20 }}>
                                        <View style={{ height: 20, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row", justifyContent: 'center' }}>

                                            <View style={{ flex: 3 }}>
                                                <Text style={{ fontSize: 16, fontWeight: "900", color: "#000", paddingLeft: 10 }}>#企业1 #1燃气站</Text>
                                            </View>
                                            <View style={{ flex: 2, paddingRight: 10 }}>
                                                <Text style={styles.tabValText}>2018/7/5 19:38</Text>
                                            </View>


                                        </View>
                                        <View style={{ height: 35, display: "flex", alignItems: 'center', paddingLeft: 10, flexDirection: "row" }}>
                                            <View style={{ flex: 3 }}>
                                                <Text style={{ fontSize: 12, color: "#333", textAlign: "left" }}>35mg/m³ (基准值:20mg/m³)</Text>
                                            </View>
                                            <View style={{ flex: 1, paddingRight: 10 }}>
                                                <Text style={styles.tabValText} style={{ backgroundColor: "#5CCEFB", textAlign: "center" }}>已解除</Text>
                                            </View>
                                        </View>
                                    </View>

                                </View>
                            )
                        })
                    }

                </ScrollView>


                <ScrollView
                    style={{ flex: 1, paddingTop: 10, }}
                // automaticallyAdjustContentInsets={false}
                // showsHorizontalScrollIndicator={false}
                // showsVerticalScrollIndicator={false}
                >
                    <Modal
                        popup
                        visible={this.state.visible3}
                        animationType="slide-up"
                        onClose={this.onClose3}
                        maskClosable
                    >
                        <View style={{ flex: 1, height: 400, padding: 5, }}>
                            <View style={{ flexDirection: "row", flex: 1.5, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1 }}>
                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>站点选取 : </Text></View>
                                    <View style={{ flex: 1 }}></View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", justifyContent: "center" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>#1企业</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>#2企业</Tag></View>
                                        <View style={{ margin: 2 }}><Tag>#3企业</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag>#4企业</Tag></View>
                                        <View style={{ margin: 2 }}><Tag style={{ opacity: 0 }}>#5企业</Tag></View>
                                    </View>
                                </View>
                            </View>

                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}>
                                    <Text style={{ textAlign: "center", paddingLeft: 10 }}>报警类型 : </Text>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>库存报警</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>泄漏报警</Tag></View>
                                    </View>
                                </View>
                            </View>

                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}>
                                    <Text style={{ textAlign: "center", paddingLeft: 10 }}>报警状态 : </Text>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>全部</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>已解除</Tag></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Tag style={{ width: 80 }}>未解除</Tag></View>
                                    </View>
                                </View>
                            </View>

                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ flex: 1 }}>
                                    <View style={{ flex: 1, alignItems: "center", flexDirection: "row", display: "flex" }}><Text style={{ textAlign: "center", paddingLeft: 10 }}>报警时间 : </Text></View>

                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 3 }}>

                                    <List style={{ width: 250 }}>
                                        <DatePicker
                                            value={this.state.value}
                                            mode="date"
                                            minDate={new Date(2015, 7, 6)}
                                            maxDate={new Date(2026, 11, 3)}
                                            onChange={this.onDatePicker}
                                            format="YYYY-MM-DD"
                                        >
                                            <List.Item arrow="horizontal" size="small"></List.Item>
                                        </DatePicker>
                                    </List>

                                </View>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1, backgroundColor: "#fff", margin: 3 }}>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Button size="small" style={{ width: 100, height: 30 }}>取消</Button></View>
                                    </View>
                                </View>
                                <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, }}>
                                    <View style={{ display: "flex", flexWrap: "wrap", alignItems: "center", flexDirection: "row" }}>
                                        <View style={{ margin: 2 }}><Button type="primary" size="small" style={{ width: 100, height: 30 }}>查询</Button></View>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </Modal>

                    {
                        topClire3.map((item, index) => {
                            return (
                                <View
                                    style={{ display: "flex", alignItems: 'center', flexDirection: "row", height: 90, paddingLeft: 10, backgroundColor: "#fff" }}
                                    key={index}
                                >
                                    <View style={{ borderRadius: 50, overflow: "hidden", width: 50, height: 50 }}>
                                        <Image
                                            style={{ width: 50, height: 50 }}
                                            source={require('../../static/img/lou2.png')}
                                        />
                                    </View>

                                    <View style={{ flex: 1, height: 90, padding: 3, borderBottomWidth: 1, borderBottomColor: "#ccc", paddingTop: 20 }}>
                                        <View style={{ height: 20, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row", justifyContent: 'center' }}>

                                            <View style={{ flex: 3 }}>
                                                <Text style={{ fontSize: 16, fontWeight: "900", color: "#000", paddingLeft: 10 }}>#企业1 #1燃气站</Text>
                                            </View>
                                            <View style={{ flex: 2, paddingRight: 10 }}>
                                                <Text style={styles.tabValText}>2018/7/5 19:38</Text>
                                            </View>


                                        </View>
                                        <View style={{ height: 35, display: "flex", alignItems: 'center', paddingLeft: 10, flexDirection: "row" }}>
                                            <View style={{ flex: 3 }}>
                                                <Text style={{ fontSize: 12, color: "#333", textAlign: "left" }}>35mg/m³ (基准值:20mg/m³)</Text>
                                            </View>
                                            <View style={{ flex: 1, paddingRight: 10 }}>
                                                <Text style={styles.tabValText} style={{ backgroundColor: "#5CCEFB", textAlign: "center" }}>已解除</Text>
                                            </View>
                                        </View>
                                    </View>

                                </View>
                            )
                        })
                    }

                </ScrollView>
            </Tabs>
        )
    }
}

export default () => (
    <Provider>
        <Police />
    </Provider>
);